今天要開始寫點簡單的vue，首先先說明為什麼要用資料綁定！
現今的網站開始使用component觀念，也就是將會重復使用到的網頁結構寫成一個「元件」，在需要用到它時，將它引用進頁面裡，再靠「資料」去控制需呈現的內容，這麼做可有效提高工作效率，並且讓維護更輕鬆，只要更新資料就能更新內容，接下來幾天裡我們就能開始體會這個優點了。

現在先從資料綁定開始嘗試，開起昨天完成的vue網站，並找到src資料夾下的 App.vue檔，這個檔就是我們的首頁，為了讓練習畫面清處點，可先將範例內容刪除，如下：

<template>
  <div id="app">
    
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style></style>

vue檔內容解說

• <template>是我們放html標籤的地方，它有個要注意的限制！就是一定要用一個標籤包起所有內容，因此我留下<div id="app">做為包起所有內容的父層標籤。
• <script>是寫vue程式的地方。
• export default是默認導出模塊，這樣就能引用裡面的內容出來使用。
• <style>當然就是用來寫css的地方了！

範例實做

簡單的介紹完，現在就來試著綁一句文字內容進去吧！
我先在<div id="app">寫入一個簡單的標籤<h1></h1>，這是我要放文字的地方！
接著寫入vue，如下範例：

<template>
  <div id="app">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        title:'vue好簡單'
      }
    }
  }
</script>

<style></style>

實做解說

首先先說明我在<script>內寫入的內容：

• name:指的是「為組件命名」，可不寫，但有名字的組件會有更清處的警告信息。
• data()是我們要放資料的function(函數)。
• return裡面是要回傳給我們的內容。
• title是我自已為這組資料取的名字，當然後面就是它的內容了，記得使用單引號包起文字！

接下來說明標籤<h1></h1>內的{{ title }}

• {{ }}是用來表示「綁定資料」，裡面就是剛剛我為資料取的名字，簡單說就是我要把資料內容放在裡。

再來依照昨天教的如何將網站起起來(起一個伺服器)並開起網頁，你就能看到成品囉！超簡單的是不是？